<template>
  <div class="full-height column" :class="ui.modelClass" style="width: 200px">
    <div class="full-width row items-center no-wrap" style="height: 50px">
      <div class="text-h6 q-pa-sm">{{ title }}</div>
      <q-space />
      <q-btn
        flat
        icon="clear"
        style="height: 50px; width: 50px"
        @click="exit()"
      />
    </div>
    <div class="full-width q-pa-sm" style="height: 50px" v-if="needAdd">
      <q-btn
        class="full-width bg-primary"
        icon="add"
        color="indigo"
        @click="add()"
      />
    </div>
    <q-scroll-area
      ref="scrollAreaRef"
      style="width: 100%; height: calc(100vh - 150px)"
    >
      <div class="column">
        <div
          v-for="item in list"
          :key="item"
          class="full-width q-pa-sm"
          style="height: 50px"
        >
          <q-btn
            class="full-width text-over text-white"
            :class="activeId === item.id ? 'bg-light-blue-6' : 'bg-grey-blue'"
            @click="choose(item)"
          >
            <div class="row">
              <div class="col">
                {{ item.name }}
              </div>
              <div
                class="col absolute-right item-center"
                v-show="activeId === item.id"
              >
                <slot></slot>
              </div>
            </div>
          </q-btn>
        </div>
      </div>
    </q-scroll-area>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useUiStore } from "stores/ui";

const props = defineProps({
  needAdd: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    default: () => [],
  },
  activeId: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["exit", "choose", "add"]);

defineExpose({ scrollTo });

const ui = useUiStore();
const scrollAreaRef = ref();

function scrollTo(position) {
  switch (position) {
    case "start":
      scrollAreaRef.value.setScrollPosition("vertical", 0, 300);
      break;
    case "end":
      scrollAreaRef.value.setScrollPosition(
        "vertical",
        (props.list.length + 1) * 50,
        300
      );
      break;
    default:
      scrollAreaRef.value.setScrollPosition("vertical", position * 50, 300);
      break;
  }
}

function exit() {
  emit("exit");
}

function choose(value) {
  emit("choose", value);
}

function add() {
  emit("add", "landscape");
}
</script>

<style lang="scss" scoped></style>
